<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="approvalProcess/css/bootstrap.min.css" />
    <script type="text/javascript" src="approvalProcess/js/jquery.min.js"></script>
    <script type="text/javascript" src="approvalProcess/js/bootstrap.js" ></script>
    <script type="text/javascript" src="approvalProcess/js/overall.js"></script>

    <title>忘记密码</title>

    <style>
        body{
            background: url(approvalProcess/img/loginbgk.jpg) no-repeat;background-size:cover;
        }
    </style>

</head>

<body>

<div class="container" style="margin-top: 160px;">

    <div class="row">
        <div class="col-md-6 col-md-offset-3">

            <div class="panel panel-default">

                <div class="panel-heading text-center">
                    <a style="color: #0f0f0f" href="${pageContext.request.contextPath}/login"><h3>校园出入资格审核系统</h3></a>
                </div>
                <div class="panel-body" >
                    <div style="margin-left: 60px">

                        <div class="form-group" >
                            <div class="form-inline">
                                 <label ><b style="color: red">*&nbsp</b>账&emsp;&emsp;号:&ensp;</label>
                                 <input type="text" class="form-control" id="user_name" placeholder="请输入账号" maxlength="18">
                                 <span id="uname" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-inline">
                                 <label ><b style="color: red">*&nbsp</b>&emsp;新密码:&ensp;</label>
                                 <input type="password" class="form-control" id="user_password" placeholder="请输入新密码" maxlength="16">
                                 <a href="javascript:void(0);" data-toggle="dropdown" data-hover="dropdown"><img id="show_hide" onclick="hideShowPsw()" src="approvalProcess/img/hide_paswd.png" width="20px" height="20px"/></a>
                                <span id="upawd" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-inline">
                                 <label ><b style="color: red">*&nbsp</b>确认密码:&ensp;</label>
                                 <input type="password" class="form-control" id="user_passwordly" placeholder="请再次输入密码" maxlength="16">
                                 <a href="javascript:void(0);" data-toggle="dropdown" data-hover="dropdown"><img id="show_hidely" onclick="hideShowPswly()" src="approvalProcess/img/hide_paswd.png" width="20px" height="20px"/></a>
                                <span id="upawdly" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                        <div class="form-group" >
                            <div class="form-inline">
                                 <label ><b style="color: red">*&nbsp</b>电子邮箱:&ensp;</label>
                                 <input type="email" class="form-control" id="user_email" placeholder="请输入电子邮箱" maxlength="20">
                                 <span id="email" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="form-inline">
                                 <label ><b style="color: red">*&nbsp</b>&emsp;验证码:&ensp;</label>
                                 <input type="text" placeholder="（不区分大小写）" id="veri_code" style="width: 130px;" class="form-control" maxlength="6">
                                 <a href="javascript:void(0);"><canvas id="canvas" width="100px" height="30px"></canvas></a>
                                <span id="ver_code" style="font-size:10px; color: red;"></span>
                            </div>
                        </div>

                </div>



                     <button type="button" style="width: 80%; margin-bottom: 20px" class="btn btn-success btn-block btn-lg container" onclick="initRegirly()">提交</button>

                    <div class="text-center">
                        <span id="user_messge" style="font-size:10px; color: red;"></span>
                    </div>

                </div>

            </div>
        </div>

    </div>


</div>





<script type="text/javascript">

    //将验证码显示给用户
    var show_num = [];
    draw(show_num);
    //点击更换验证码
    $("#canvas").on('click',function(){
        draw(show_num);
        $("#ver_code").text("");
    })

    //密码的显示与隐藏
    function hideShowPsw(){
        var type = $("#user_password").attr("type");
        if (type === "password"){
            $("#user_password").attr("type","text");
            $("#show_hide").attr("src","approvalProcess/img/show_paswd.png");
        }else {
            $("#user_password").attr("type","password");
            $("#show_hide").attr("src","approvalProcess/img/hide_paswd.png");
        }
    }

    function hideShowPswly(){
        var type = $("#user_passwordly").attr("type");
        if (type === "password"){
            $("#user_passwordly").attr("type","text");
            $("#show_hidely").attr("src","approvalProcess/img/show_paswd.png");
        }else {
            $("#user_passwordly").attr("type","password");
            $("#show_hidely").attr("src","approvalProcess/img/hide_paswd.png");
        }
    }

    function initRegirly(){
        var userName = $("#user_name").val();
        var userPassword = $("#user_password").val();
        var userPasswordly = $("#user_passwordly").val();
        var userEmail = $("#user_email").val();
        var veriCode = $("#veri_code").val();

        if($.isEmptyObject(userName)){
            $("#uname").text("账号为空");
            return;
        }else {
            $("#uname").text("");
        }

        if($.isEmptyObject(userPassword)){
            $("#upawd").text("密码为空");
            return;
        }else if (!checkpwd(userPassword)){
            $("#upawd").text("密码强度过低");
            return;
        }else {
            $("#upawd").text("");
        }

        if($.isEmptyObject(userPasswordly)){
            $("#upawdly").text("确认密码为空");
            return;
        }else if (userPassword !== userPasswordly){
            $("#upawdly").text("两次密码不相符");
            return;
        }else {
            $("#upawdly").text("");
        }

        if($.isEmptyObject(userEmail)){
            $("#email").text("电子邮箱为空");
            return;
        }else if (!checkEmail(userEmail)){
            $("#email").text("邮箱格式不正确");
            return;
        }else {
            $("#email").text("");
        }

        if($.isEmptyObject(veriCode)){
            $("#ver_code").text("验证码为空");
            return;
        }else {
            $("#ver_code").text("");
        }

        var num = show_num.join("");
        if(veriCode.toLowerCase() !== num.toLowerCase()){
            $("#ver_code").text("验证码错误");
            draw(show_num);
            return;
        }


        var postUrl = "${pageContext.request.contextPath}/updateUserPwd";
        var str = {
            "userLoginName": userName,
            "userLoginPwd": userPasswordly,
            "userEmail": userEmail
        };
        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status == "0"){
                    if (data.msg === "账号不存在"){
                        $("#uname").text("账号不存在");
                    }else if (data.msg === "您的邮箱不正确"){
                        $("#email").text("您的邮箱不正确");
                    }else {
                        $("#user_messge").text(data.msg);
                    }
                }else {
                    location.href = "${pageContext.request.contextPath}/login";
                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });

    }


</script>

</body>
</html>
</span>